<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/small_class' }"> <i class="el-icon-lx-cascades"></i> 公开课 </el-breadcrumb-item>
                <el-breadcrumb-item>第三方推流</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="page">
            <!-- 不能显示推流地址时显示,liveplay=false -->
            <div v-if="showremtime">距离直播还有<span style="color:red">{{ time }}</span>，距离直播15分钟前会出现推流地址，请做好准备调试你的直播设备!</div>
            <!--过期时显示-->
            <div v-if="expire" style="color:red">直播时间已过期，如果还想直播请重新预约</div>
            <!--显示推流地址-->
            <div v-if="showtuiliuurl">
                <span class="title">OBS/XSplit等第三方推流方式直播（以下是二维码推流地址）</span>
                <div class="method-pic"><qriously :value="tuiliuurl" :size="150" :backgroundAlpha="1" /></div>
                <div class="push-url">
                    <el-input v-model="tuiliuurl" style="margin-bottom: 10px">
                        <template slot="prepend">推流地址</template>
                        <el-button
                            v-clipboard="tuiliuurl"
                            v-clipboard:success="clipboardSuccessHandler"
                            v-clipboard:error="clipboardErrorHandler"
                            slot="append"
                            >复制</el-button
                        >
                    </el-input>
                    <el-input v-model="boliuurl">
                        <template slot="prepend">播流地址</template>
                        <el-button
                            v-clipboard="boliuurl"
                            v-clipboard:success="clipboardSuccessHandler"
                            v-clipboard:error="clipboardErrorHandler"
                            slot="append"
                            >复制</el-button
                        >
                    </el-input>
                </div>
            </div>
            <!-- 直播间地址显示 -->
            <span class="title" v-if="liveroomurl">扫码进入直播间观看</span>
            <div style="color: red" v-if="!liveroomurl">请上架后再来查看直播房间地址</div>
            <qriously v-if="liveroomurl" :value="liveroomurl" :size="150" :backgroundAlpha="1" />
            <!-- <span class="tip">* 地址有效期24小时</span> -->
        </div>
    </div>
</template>

<script>
import { getPushUrl, showandupdateLiveTime } from '../../api/index';
export default {
    data() {
        return {
            boliuurl: '',
            tuiliuurl: '',
            liveroomurl: '', //是否上架
            expire: false, //直播是否过期
            showtuiliuurl: false, //控制是否显示推流地址
            showremtime:false,//显示剩余时间
            time:''
        };
    },
    methods: {
        clipboardSuccessHandler({ value, event }) {
            this.$message.success('复制成功');
            console.log('复制成功', value);
        },
        clipboardErrorHandler({ value, event }) {
            console.log('复制失败', value);
        },
        async getLiveRoomUrl() {
            let id = this.$route.query.id;
            let res = await getPushUrl({ id });
            if (res.code == 1) {
                if (res.data.status == 1) {
                    let domainname = localStorage.getItem('domainname') ? localStorage.getItem('domainname') : 'xuejing';
                    this.liveroomurl = this.$front.FrontUrl + '/xuejing/livecontent/' + domainname + '?id=' + id;
                } else {
                    this.liveroomurl = '';
                }
            }
        }
    },
    async created() {
        let nowtime = parseInt(Date.now() / 1000);
        let id = this.$route.query.id;
        let restime = await showandupdateLiveTime({ id, action: 'show' });
        if (restime.code == 1) {
            let intstarttime = restime.data.intstarttime;
            let intendtime = restime.data.intendtime;
            var time=(intstarttime-nowtime)*1000;
            let stime=setInterval(() => {
                time=time-1000;
                this.time=formatDuring(time);
                if(time<0){
                time=0;
                clearInterval(stime);
            }
            }, 1000);
            if (!intstarttime) {
                this.$message.error('请设置开播时间');
                return;
            }
            if (!intendtime) {
                this.$message.error('请设置直播的结束时间');
                return;
            }
            this.getLiveRoomUrl(); //查房间地址
            if (intstarttime - nowtime < 15 * 60 && nowtime < intendtime) {
                //如果开始时间,距离直播时间小于15分钟且在直播预约日期期间，那就生成显示推流地址提供客户使用
                this.showremtime = false;
                this.showtuiliuurl=true;
                this.expire = false;
                let res = await getPushUrl({ id });
                console.log(res);
                if (res.code == 1) {
                    this.tuiliuurl = res.data.datatest.tuiliu_url;
                    this.boliuurl = res.data.datatest.boliu_url;
                }
            } else if (intendtime - nowtime <= 0) {
                //预约的直播时间已经过期了
                this.showremtime = false; //不显示直播倒计时
                this.expire = true; //显示过期提示
            } else if (intstarttime - nowtime > 15 * 60) {
                //直播还没到预播阶段距离开播时间还大于10分钟
                this.showremtime=true;//显示直播倒计时
                this.expire=false//不显示过期提示
            }
        } else {
            // console.log(getSpeTime(intstarttime*1000));
            // console.log(getSpeTime(intendtime*1000));
            // console.log(getSpeTime(nowtime*1000));
            console.log('获取直播日期数据失败');
        }
    }
};
</script>

<style scoped>
.page {
    margin-top: 100px;
    text-align: center;
}
.title {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    line-height: 36px;
    color: #666;
}
.method-pic {
    padding: 20px 10px;
}
.push-url {
    padding: 20px 200px;
}
.tip {
    display: inline-block;
    padding-top: 50px;
    font-size: 13px;
    color: #999;
}
</style>

<style>
.el-input-group__append {
    background: #e6a23c;
}
.el-input-group__append span {
    color: #fff;
}
</style>